<template>
	<view>
		<view style="padding:20rpx;">
			<fui-data-tag multiple mark defaultBorderColor="#e0e0e0" :options="XingxiangLabels" :value="UserLabels"
				@change="changeLabel"></fui-data-tag>
		</view>
		<button class="sub-btn" @click="saveLabel">保存我的形象风格</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				XingxiangLabels: [],
				SelectLabels: [],
				UserLabels: []
			};
		},
		onLoad() {
			this.getLabel();
			this.getVipLabel();
		},
		methods: {
			getVipLabel() {
				this.$httpost('/Labels/VipLabel', {}).then(res => {
					if (res.code == 200) {
						this.XingxiangLabels = res.data.XingxiangLabels
					}
				});
			},
			getLabel() {
				this.$httpost('/Labels/UserLabels', {}).then(res => {
					if (res.code == 200) {
						if (res.data.xingxiangLabelIDs) {
							this.UserLabels = JSON.parse(res.data.xingxiangLabelIDs)

							// console.log('this.UserLabels', this.UserLabels)
						}
					}
				});
			},
			changeLabel(e) {
				// console.log('changeLabel', e)
				this.SelectLabels = e.detail.item
				this.UserLabels = e.detail.value
			},
			saveLabel() {

				// console.log('this.UserLabels', this.SelectLabels)

				this.$httpost('/UserAction/saveXingxiangLabel', {
					SelectLabels: this.SelectLabels,
					UserLabels: this.UserLabels
				}).then(res => {
					if (res.code == 200) {
						if (res.data.xingxiangLabels !== null) {
							this.UserLabels = JSON.parse(res.data.xingxiangLabels)
							uni.navigateBack()
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.submitBtn {
		background-color: $globalColor;
		color: #000;
		font-size: 28rpx;
		border: 0rpx solid $globalColor;
		width: 80vw;
		height: 60rpx;
		line-height: 60rpx;
		margin: auto
	}
</style>